<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>标签的使用</title>
</head>
<body>
	<h4 style="color: red">1.div的容器布局</h4>
	<div id = "container" style="width: 500px; height: 300px; background-color: #FFA500;">

		<div id = "header_container">
		   <h1 style="font-size: 20px; margin-bottom: 0; margin-left: 10px;">网站的标题</h1>
	   </div>

       <!-- 左侧框 -->
	   <div id = "left_list_container" style="width: 100px; height: 200px;background-color: #FFD700; float: left;">
		   	<ol style="color: blue; margin-left:0px;">
		   		<li>HTML</li>
		   		<li>JS</li>
		   		<li>CSS</li>
		   	</ol>
	   	
	   </div>

       <!-- 右侧框 -->
	   <div id = "right_container" style="width: 400px;height:200px; background-color: #EEEEEE; float: left;">
	   		<h1>显示的内容是什么</h1>
	   </div>

	   <!-- 底部footer -->
	   <div id = "footer_container" style="background-color:#000000; width: 500px; height:100px;">
	   	
	   	<h3 style="background-color:yellow;text-align: center; ">这是网站的底部</h3>
	   </div>
    	
	</div>


	<!-- 2.span的容器布局 -->
      <h4 style="color: red">2.span的容器布局</h4>
      <table style="width: 500px; border: 0px;">
      	
        <tr>
        	<td colspan="2" style="background-color:#FFA500;width: 500px;height: 50px;">
        		<h4>网页的头部标题</h4>
        	</td>
        </tr>

        <tr>
        	<td style="background-color:#FFD700;width:100px;vertical-align: center;">
        		<ul>
        			<li>HTML</li>
        			<li>JS</li>
        			<li>CSS</li>
        		</ul>
        	</td>

        	<td style="background-color:#eeeeee; height:200px; width:400px; vertical-align:top;">
                         内容在这里
             </td>
        </tr>

        <tr>
        	<td colspan="2" style="background-color:#FFA500;width: 500px;height: 50px;">
        		<h4>底部的header</h4>
        	</td>
        </tr>

      </table>
       

       <!-- 3.表单输入 -->
        <h4 style="color: red;">3.表单输入</h4>
       <div id="table_input" style="background-color: orange;width: 500px;text-align: center;">
         <p>用户登录</p>
         <form>

           	<span>用户名：</span>
           	<input type="text" name="userName" placeholder="请输入用户名">
           	 <br>

           	<span>密码：</span>
            <input type="password" name="password" placeholder="请输入密码">
      
            <br>
            <input type="radio" name="remberPassword" style="font-size: 10px;">记住密码
            <input type="radio" name="forgetPassword" style="font-size: 10px;">忘记密码
            <br>

            <input type="checkbox" name="question"> 是否记住密码
            <br>

            <form>
              <select name="cars">
              <option value="选项4">选项1</option>
              <option value="选项5" selected>选项2</option>
              <option value="选项6">选项3</option>
              </select>
            </form>
            <br>

            <input type="submit" name="submit" value="登录">

         </form>
       </div>

       <!-- 4.浏览器里面的浏览器 -->
       <h4 style="color: red;">4.浏览器里面的浏览器</h4>
       <div id="in_browse" style="width: 50%; height: 500px; background-color: rgb(255,255,0);">
        <iframe src="01-helloWorld.html" frameborder="0" name="helloworld" style="width: 100%;height: 500px;"></iframe>
   
       </div>

       <!-- 5.HTML使用js -->
       <h4 style="color: red;">5.HTML使用js</h4>

       <script type="text/javascript">

         function jsfunction(){
            p =  document.getElementById("demo")
            p.innerHTML = '您好 javascript'
            p.style.color = "red"
         }
       </script>

       <div id="call_js" style="width: 500px;height: 200px;background-color:#48D1CC">
       <p id="demo">后面增加js调用的东西</p>
       <button type="button" onclick="jsfunction()">点我调用</button>
       </div>



</body>
</html>